<div class="containerStyle">
  <h3>描述</h3>
  <p>表格列拖动特性 + 排序特性 + 表头过滤</p>
  <p>用户可通过panelAlign接口控制表头过滤下拉面板展开方向，详见用例</p>
  <h3>示例</h3>

  <ti-table
    [(displayedData)]="displayed"
    [srcData]="srcData"
    [columns]="columns"
    [searchWords]="searchWords"
    [searchKeys]="searchKeys"
    tiColsResizable
  >
    <div class="ti3-resize-wrapper">
      <table>
        <thead>
          <tr>
            <th width="{{columns[0].width}}">
              <ti-cell-text>{{columns[0].title}}</ti-cell-text>
              <ti-head-filter
                [options]="columns[0].options"
                panelAlign="right"
                [(ngModel)]="columns[0].selected"
                (select)="onSelect($event, columns[0])"
                [ngClass]="{'ti3-head-filtered': columns[0].selected && columns[0].selected.label !== 'all'}"
              >
              </ti-head-filter>
              <ti-head-sort [sortKey]="columns[0].key"></ti-head-sort>
            </th>
            <th width="{{columns[1].width}}">
              <ti-cell-text>{{columns[1].title}}</ti-cell-text>
              <ti-head-filter
                [options]="columns[1].options"
                [(ngModel)]="columns[1].selected"
                (select)="onSelect($event, columns[1])"
                [ngClass]="{'ti3-head-filtered': columns[1].selected && columns[1].selected.label !== 'all'}"
              >
              </ti-head-filter>
              <ti-head-sort [sortKey]="columns[1].key"></ti-head-sort>
            </th>
            <th width="{{columns[2].width}}">
              <ti-cell-text>{{columns[2].title}}</ti-cell-text>
              <ti-head-sort [sortKey]="columns[2].key" [asc]="columns[2].asc"></ti-head-sort>
            </th>
            <th>
              <ti-cell-text>{{columns[3].title}}</ti-cell-text>
              <ti-head-sort [sortKey]="columns[3].key"></ti-head-sort>
            </th>
            <th width="{{columns[4].width}}" tiOverflow>{{columns[4].title}}</th>
            <!--该列无法排序，因为未做ti-sort设置-->
          </tr>
        </thead>
        <tbody>
          <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
          <tr *ngFor="let row of displayed">
            <td tiOverflow>{{row.firstName}}</td>
            <td tiOverflow>{{row.lastName}}</td>
            <td tiOverflow>{{row.age}}</td>
            <td tiOverflow>{{row.balance}}</td>
            <td tiOverflow>{{row.email}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </ti-table>
</div>
